

$(document).ready(function() {
	datatablePlugins();
	
	ini();
	formFilters();
});




/**
 * this function is added to the prototype of datatable plugin so we can reload 
 * data from server and use the local search feacture (avoiding this way the use of the server by the search field)
 */
function datatablePlugins() {
	$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
	{
	    if ( typeof sNewSource != 'undefined' && sNewSource != null )
	    {
	        oSettings.sAjaxSource = sNewSource;
	    }
	    this.oApi._fnProcessingDisplay( oSettings, true );
	    var that = this;
	    var iStart = oSettings._iDisplayStart;
	    var aData = [];
	 
	    this.oApi._fnServerParams( oSettings, aData );
	     
	    oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) {
	        /* Clear the old information from the table */
	        that.oApi._fnClearTable( oSettings );
	         
	        /* Got the data - add it to the table */
	        var aData =  (oSettings.sAjaxDataProp !== "") ?
	            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
	         
	        for ( var i=0 ; i<aData.length ; i++ )
	        {
	            that.oApi._fnAddData( oSettings, aData[i] );
	        }
	         
	        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
	        that.fnDraw();
	         
	        if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
	        {
	            oSettings._iDisplayStart = iStart;
	            that.fnDraw( false );
	        }
	         
	        that.oApi._fnProcessingDisplay( oSettings, false );
	         
	        /* Callback user function - for event handlers etc */
	        if ( typeof fnCallback == 'function' && fnCallback != null )
	        {
	            fnCallback( oSettings );
	        }
	    }, oSettings );
	};
}



function datatablePlugins(){
	
}


function formFilters() {
	
	// datepickers options 
	var datePickerOpt = {
		dateFormat: 		'yy-mm-dd'
	};
	
	var startDate 	= $('#startDate');
	var endDate 	= $('#endDate');
	
	startDate.datepicker(datePickerOpt);
	endDate.datepicker(datePickerOpt);
	
	startDate.change(function() {
		if(endDate.val()) {
			
			// set global vars to be used with datatable plugin
			//offerId = $('#offerList').val();
			//start 	= $(this).val();
			//end 	= endDate.val();
			console.log('start');
			
			// reload datatable
			//oTable.fnReloadAjax();
		}
	});
	
	endDate.change(function() {
		if(startDate.val()) {
			
			// set data
			//offerId = $('#offerList').val();
			//start 	= startDate.val();
			//end 	= $(this).val();
			
			// ... reload
			//oTable.fnReloadAjax();
			
			console.log('start');
		}
	});

	// button to clear date fields
	var clearButton = $('#clearButton');
	clearButton.button();
	clearButton.click(function() {
		startDate.val('');
		endDate.val('');
		//offerId = $('#offerList').val();
		//start 	= null;
		//end 	= null;
		
		//oTable.fnReloadAjax();
	});
}


function ini() {
	
	var oTable = $('#reservationTable');
	
	var serverRequest = ajaxUrl + '/readReservationAction';

	var nCloneTh = document.createElement('th');
    var nCloneTd = document.createElement('td');
    nCloneTd.innerHTML = '<img src="http://localhost/eclipseWP/RadicalBooking/assets/img/hotel/details_open.png">';
    nCloneTd.className = "center";	

    $('#reservationTable thead tr').each( function () {
        this.insertBefore(nCloneTh, this.childNodes[0]);
    });
     
    $('#reservationTable tbody tr').each( function () {
        this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
    });

	var tableProperties = {		
		'sAjaxSource': 		serverRequest,	
		'sServerMethod':	'POST',
		'sAjaxDataProp': 	'data',
		"aoColumns": [
  			{"mDataProp":"clientId"},
  			{"mDataProp":"clientName"},
  			{"mDataProp":"offerName"},
  			{"mDataProp":"email"},
  			{"mDataProp":"phone"},
  			{"mDataProp":"date"}
  			//{"mDataProp":"company"}
  		],
		'aoColumnDefs': [
			{'bSearchable': false, 'bSortable': false, 'bVisible': false, 'aTargets':[0]} 
			//{'bSortable':false, 'aTargets':[0]}
		],
		'bJQueryUI':		true,	// enable jqueryUI Themes
		'bPaginate':		true,
		'bSort':			true,
		'bInfo':			true,
		'bAutoWidth':		true,
		'bProcessing': 		false,
		'bServerSide': 		false	// use server side processing
	};
	
	oTable.dataTable(tableProperties);

	// default sort
	oTable.fnSort([[5,'desc']]);

	oTable.find('tbody td img').live('click', function() {
		
	});

	oTable.live('click', function() {
		
	});
}











function fnFormatDetails ( oTable, nTr ) {
		
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';
     
    return sOut;
}
